<script>
import ModifyCurrent from "./components/modifyCurrent.vue"
import ToggleSchedule from "./components/toggleSchedule.vue"
import store from "@/store"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"

export default {
  name: "schedule",
  components: { ToggleSchedule, ModifyCurrent },
  data() {
    return {
      currentTab: "modifyCurrent",
      tabList: [
        {
          value: "modifyCurrent",
          label: "更改计划",
        },
        {
          value: "toggleSchedule",
          label: "切换词库",
        },
      ],
    }
  },
  onLoad(query) {
    if (query.currentTab) this.currentTab = query.currentTab
  },
  onShow() {
    //初始化组件
    this.$nextTick(() => {
      this.$refs[this.currentTab].init()
    })
  },
  methods: {
    handleTabToggle(item) {
      this.currentTab = item.value
      //初始化组件
      this.$nextTick(() => {
        this.$refs[item.value].init()
      })
    },
    // 返回到学习界面
    async backToLearningPage(thesaurusCategory) {
			uni.reLaunch({
				url: "/vocabulary/pages/currentPlanInfo/index",
			})
    },
  },
}
</script>

<template>
  <view class="page">
    <!--		修改当前计划 / 切换新增计划-->
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="item in tabList"
        :key="item.value"
        :class="[item.value === currentTab ? 'active' : '']"
        @click="handleTabToggle(item)"
      >
        <view class="title">
          {{ item.label }}
          <view class="bottom-line" v-show="item.value === currentTab"></view>
        </view>
      </view>
    </view>
    <view class="placeholder"></view>
    <!--		更改当前计划-->
    <modify-current v-if="currentTab === 'modifyCurrent'" ref="modifyCurrent" @backToLearningPage="backToLearningPage"></modify-current>
    <!--		切换词库（计划）-->
    <toggle-schedule
      v-else-if="currentTab === 'toggleSchedule'"
      ref="toggleSchedule"
      @backToLearningPage="backToLearningPage"
    ></toggle-schedule>
  </view>
</template>

<style scoped lang="scss">
.page {
  background: var(--gray-background-color);
  min-height: 100vh;
}

.placeholder {
  height: 100rpx;
}

.tab-list {
  display: flex;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: white;

  .tab-item {
    width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;

    &.active {
      .title {
        color: var(--text-color-theme);
        font-weight: 500;
      }
    }

    .title {
      color: var(--text-color);
      font-size: 30rpx;
      position: relative;

      .bottom-line {
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        width: 40%;
        transform: translateX(-50%);
        height: 6rpx;
        background: var(--text-color-theme);
      }
    }
  }
}
</style>
